<!--
 * @Description: OSPF 区域列表
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-12 16:05:54
 * @LastEditTime: 2021-10-28 20:03:59
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <template v-if="show === 0">
      <table-bar
        :showTop="false"
        :layout="['column']"
        :columns="columns"
        @changeColumn="changeColumn"
      >
        <div slot="top"></div>
        <div slot="bottom">
          <!-- 刷新 -->
          <el-button size="medium" plain @click="reset">刷新</el-button>
          <!-- 新建 -->
          <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
        </div>
      </table-bar>
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <!-- 实例ID -->
        <el-table-column
          label="实例ID"
          align="center"
          width="100"
          sortable
          prop="instanceId"
          v-if="columns[0].show"
        />
        <!-- 区域ID -->
        <el-table-column
          label="区域ID"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="areaId"
          v-if="columns[1].show"
        ></el-table-column>
        <!-- 入方向过滤 -->
        <el-table-column
          label="入方向过滤"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="inFilter"
          v-if="columns[2].show"
        ></el-table-column>
        <!-- 出方向过滤 -->
        <el-table-column
          label="出方向过滤"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="outFilter"
          v-if="columns[3].show"
        ></el-table-column>
        <!-- 认证 -->
        <el-table-column
          label="认证"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="areaAuthLabel"
          v-if="columns[4].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.areaAuth === 'NA'">不使能</span>
            <span v-if="scope.row.areaAuth === 'Simple'">Simple</span>
            <span v-if="scope.row.areaAuth === 'MD5'">MD5</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" label="操作" width="160px">
          <!-- 删除 -->
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              class="table-btn"
              @click="optionsIP(scope.row)"
              v-power="scope.row.dgId === $store.state.user.user.info.dgId ? 2 : 0"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              class="table-btn"
              @click="handleDelete(scope.row)"
              v-power="scope.row.dgId === $store.state.user.user.info.dgId ? 2 : 0"
            >删除</el-button>
          </template>
        </el-table-column>
      </tao-table>
    </template>
    <template v-if="show === 1">
      <forms :ne="ne" @handleDiag="handleDiag" :insDatas="insDatas" :row="areaRowInfo"></forms>
    </template>
  </div>
</template>

<script>
import forms from './forms.vue';
export default {
  props: ['ne', 'menuList'],
  components: { forms },
  data () {
    return {
      dataList: [],
      show: 0,
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: '实例ID', show: true },
        { name: '区域ID', show: true },
        { name: '入方向过滤', show: true },
        { name: '出方向过滤', show: true },
        { name: '认证', show: true },
      ],
      insDatas: [],
      ipSetStatus: false,
      areaRowInfo: {}
    };
  },
  watch: {},
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
      _this.getInstanceIdList();
      _this.$bus.$on('isCreateCase', data => {
        if (data) {
          _this.getInstanceIdList();
        }
      });
    });
  },
  methods: {
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 刷新
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    refresh () {
      let _this = this;
      let params = {
        tid: 'nbf.res.l3protocol.ospf.ospfinstarea'
      };

      _this.$http.post({
        url: '/api/resource/nemng/confobjs/' + _this.ne.id,
        data: params
      }).then(res => {
        if (res) {
          _this.dataList = res;
        }
      });
    },
    // 创建OSPF区域实例
    handleCreate () {
      let _this = this;
      _this.show = 1;
    },
    // 删除OSPF区域
    handleDelete (row) {
      let _this = this;
      let params = {
        commandCode: 'l3proctocol.ospf.area.set',
        paras: {
          removes: [{
            instanceId: row.instanceId,
            areaId: row.areaId
          }]
        }
      };
      _this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        _this.$http.post({
          url: '/api/resource/nemng/command/' + _this.ne.id,
          data: params
        }).then(res => {
          if (res) {
            _this.$message.success('删除成功！');
            _this.refresh();
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // 新建OSPF区域的回调
    handleDiag (data) {
      let _this = this;
      _this.show = data;
      _this.areaRowInfo = {};
    },
    // 获取实例id列表
    getInstanceIdList () {
      let _this = this;
      _this.$http.post({
        url: '/api/resource/nemng/confobjs/' + _this.ne.id,
        data: {
          tid: 'nbf.res.l3protocol.ospf.ospfinst'
        }
      }).then(res => {
        if (res) {
          _this.insDatas = res;
        }
      });
    },
    // 设置IP配置
    optionsIP (row) {
      let _this = this;
      _this.areaRowInfo = row;
      _this.show = 1;
    },
    // ip配置的回调
    closeDiag (data) {
      let _this = this;
      _this.ipSetStatus = data;
    },
    // 菜单按钮
    handleCommand (val) {
      let _this = this;
      _this.$emit('showOSPF', val);
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    .table-btn {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
  .btn-select {
    width: 89px;
    margin-right: 10px;
    ::v-deep .el-button {
      padding: 10px;
    }
  }
}
</style>